import {Form, Input, Checkbox, Button, message} from 'antd'
import styles from './login.module.scss'

interface IForm {
    email: string
    password: string
}

const Login = () => {
    const [form] = Form.useForm();
    const onFinish = (values: IForm) => {
        message.success(JSON.stringify(values));
    }
    return (
        <div className={styles.login}>
            <div className={styles.card}>
                <h1 style={{fontWeight: 700, marginBottom: '12px'}}>欢迎回来</h1>
                <div className={styles.info} style={{color: '#A1A1A1', marginBottom: '28px'}}>请输入您的帐户信息以开始管理您的项目</div>
                <Form form={form} onFinish={onFinish}>
                    <Form.Item name='email' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>邮箱</span>}
                               rules={[{required: true, message: '请输入邮箱'}]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item name='password' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>密码</span>}
                               rules={[{required: true, message: '请输入密码'}]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item>
                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                            <div>
                                <Checkbox/>
                                <span style={{color: '#FFF', marginLeft: '8px'}}>记住账号</span>
                            </div>
                            <div style={{color: '#006BE6'}}>
                                <span style={{cursor: 'pointer'}}>忘记密码?</span>
                            </div>
                        </div>
                    </Form.Item>
                    <Form.Item>
                        <Button style={{width: '100%'}} htmlType="submit" type='primary'>登录</Button>
                    </Form.Item>
                </Form>
                <div style={{ textAlign: 'center' }}>
                    <span>还没有账号?</span>
                    <span style={{marginLeft: '10px', cursor: 'pointer',color: '#006BE6'}}>创建账号</span>
                </div>
            </div>
        </div>
    )
}

export default Login